<template>
	<u-tabbar :value="currentTab" @change="handleTabChange" :fixed="true" :placeholder="true">
		<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
		<u-tabbar-item text="订单" icon="order"></u-tabbar-item>
		<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
	</u-tabbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const currentTab = ref(0);

const handleTabChange = (index: number) => {
	// 立即更新状态
	currentTab.value = index;

	// 使用微任务确保状态更新后执行跳转
	Promise.resolve()
		.then(() => {
			switch (index) {
				case 0:
					currentTab.value = index;
					uni.reLaunch({ url: '/pages/index/index' });
					break;
				case 1:
					currentTab.value = index;
					uni.reLaunch({ url: '/pages/order/order' });
					break;
				case 2:
					currentTab.value = index;
					uni.reLaunch({ url: '/pages/my/my' });
					break;
			}
		})
		.catch((err) => {
			console.error('跳转失败:', err);
		});
};
</script>
